<!-- 学生管理 -->
<template>
  <div>
       <page-header content="学生管理" @back="goback"></page-header>
       <el-form :inline="true" :model="dataForm" label-width="80px" @keyup.enter.native="getDataList()">
        <el-form-item >
            <el-input v-model="dataForm.student_name" placeholder="学生姓名"></el-input>
        </el-form-item>
        <el-form-item >
            <el-input v-model="dataForm.student_number" placeholder="学生学号"></el-input>
        </el-form-item>
        <el-form-item >
            <el-button type="primary" @click="getDataList()">查询</el-button>
            <el-button type="danger" :disabled="listSelections.length <= 0" @click="deleteHandle()">批量删除</el-button>
        </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      style="width: 100%"
      border
      @selection-change="selectionChangeHandle">
      <el-table-column
        type="selection"
        width="50">
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        prop="student_number"
        label="学号" >
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        prop="nickname"
        label="姓名" >
      </el-table-column>
       <el-table-column
        header-align="center"
        align="center"
        prop="gender"
        label="性别" >
        <template slot-scope="scope">
          <div v-if="scope.row.gender == 1"> 男</div>
          <div v-else>女</div>
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        prop="telephone"
        label="电话号码" 
        >
      </el-table-column>
         <el-table-column
        header-align="center"
        align="email"
        prop="prop"
        label="邮箱" >
      </el-table-column>
       <el-table-column
        header-align="center"
        align="center"
        prop="join_time"
        label="加入时间" >
      </el-table-column>
         <el-table-column
        header-align="center"
        align="center"
        label="操作" >
       <template slot-scope="scope">
         <div>
            <el-button type="text" size="small" style="color:#f56c6c;" @click="deleteHandle(scope.row.student_id)">删除学生</el-button>
         </div>
       </template>
      </el-table-column>
    </el-table>
     <el-pagination
     @currentChange="currentChangeHandle"
     @sizeChange="sizeChangeHandle"
     :current-page="pageIndex"
     :page-size="pageSize"
     :page-sizes="[10,20,30]"
      layout="total,sizes,prev, pager, next,jumper"
      :total="pageTotal">
    </el-pagination>

  </div>
</template>

<script>
import PageHeader from '../page-header.vue';
export default {
  components:{PageHeader},
  props:{courseInfoId:String},
  data () {
    return {
      pageIndex:1,
      pageTotal:0,
      pageSize:10,
      tableData:[],
      listSelections:'',
      dataForm:{
        id:'',
        student_name:'',
        student_number:''
      }
    }
  },
 mounted(){
      this.getDataList();
  },
  methods:{
    
     //返回课程管理
     goback(){
       this.$emit('refreshDataList')
     },
      //获得数据列表
      getDataList(){
           this.$http({
               url:this.$http.adornUrl('/course/studentManage/list'),
               method:'get',
               params:this.$http.adornParams({
                   page : this.pageIndex,
                   limit : this.pageSize,
                   student_name : this.dataForm.student_name,
                   student_number : this.dataForm.student_number,
                   course_info_id : this.courseInfoId
               })
           }).then(({data})=>{
               if(data && data.code === 0){
                   this.tableData = data.page.list
                   this.pageTotal = data.page.totalCount
               }else{
                   this.$message(data.msg)
               }
           })
      },
      //每页数
      sizeChangeHandle(val){
        this.pageIndex = 1;
        this.pageSize = val;
        this.getDataList();
      },
      //当前页
      currentChangeHandle(val){
          this.pageIndex = val;
          this.getDataList();
      },
      //多选
      selectionChangeHandle(val){
           this.listSelections = val;
      },
      //删除
      deleteHandle(id){
         var listIds = id ? [id] : this.listSelections.map(item =>{
           return item.student_id
         })
        this.$confirm(`确定name=${listIds.join(',')}进行${id?'删除':'批量删除'}?`,'提示',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
             this.$http({
               url:this.$http.adornUrl(`/course/studentManage/delete/${this.courseInfoId}`),
               method:'post',
               data:this.$http.adornData(listIds,false)
             }).then(({data})=>{
               if(data&&data.code === 0){
                 this.$message({
               message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                }
                 })
               }else{
                 this.$message(data.msg)
               }
             })
        })
      },
     
  }
}
</script>

<style  scoped>

</style>
